<template>
  <div class="card mb-5">
    <h2 class="text-2xl mb-5">🔍 质量检查结果</h2>

    <!-- Overall Status -->
    <div
      :class="['flex items-center justify-center p-4 rounded-lg mb-5 text-lg font-bold', quality.isOverallOk ? 'bg-green-100 text-green-800 border border-green-300' : 'bg-red-100 text-red-800 border border-red-300']"
    >
      {{ quality.isOverallOk ? '✅' : '❌' }} 整体质量状态: <strong>{{ quality.overallStatus }}</strong>
    </div>

    <!-- Details -->
    <div>
      <div v-if="quality.hasDetails" class="bg-gray-100 border border-gray-300 rounded-md overflow-hidden">
        <div
          :class="['p-3 cursor-pointer flex items-center justify-between font-medium bg-gray-100 border-b border-gray-300 transition-colors hover:bg-gray-200', quality.totalNgCount > 0 ? 'bg-red-50 border-b-red-200 text-red-900 hover:bg-red-100' : '']"
          @click="toggleDetails"
        >
          <div class="flex items-center gap-2.5 text-sm">
            <span>详细检查结果</span>
            <span v-if="quality.totalNgCount > 0" class="bg-red-600 text-white px-2 py-0.5 rounded-full text-xs font-bold min-w-[20px] text-center">
              {{ quality.totalNgCount }}
            </span>
            <span v-if="quality.totalNgCount > 0">个NG项目</span>
            <span v-else class="text-green-600">✓ 全部合格</span>
          </div>
          <div
            :class="['transition-transform text-sm', quality.isExpanded ? 'rotate-180' : '']"
          >
            {{ quality.isExpanded ? '▲' : '▼' }}
          </div>
        </div>

        <div
          :class="['overflow-hidden transition-all', quality.isExpanded ? 'max-h-[500px] overflow-y-auto' : 'max-h-0']"
        >
          <div class="p-4">
            <!-- Global Checks -->
            <div
              v-if="quality.globalChecks.length > 0"
              :class="['border rounded-md overflow-hidden mb-4', quality.globalChecks.some(c => c.status === 'NG') ? 'border-red-500 bg-red-50' : 'border-green-500 bg-green-50']"
            >
              <div
                :class="['p-3 font-bold flex items-center justify-between', quality.globalChecks.some(c => c.status === 'NG') ? 'bg-red-100 text-red-900' : 'bg-green-100 text-green-900']"
              >
                <span>全局检查</span>
                <span
                  :class="['text-xs px-2 py-0.5 rounded font-bold', quality.globalChecks.some(c => c.status === 'NG') ? 'bg-red-600 text-white' : 'bg-green-600 text-white']"
                >
                  {{ quality.globalChecks.some(c => c.status === 'NG') ? '❌ NG' : '✅ OK' }}
                </span>
              </div>
              <div class="p-4">
                <div class="grid gap-2.5">
                  <div
                    v-for="(check, idx) in quality.globalChecks"
                    :key="idx"
                    :class="['flex items-center justify-between p-2 rounded bg-gray-100 border-l-4', check.status === 'OK' ? 'bg-green-50 border-l-green-600' : 'bg-red-50 border-l-red-600']"
                  >
                    <div>
                      <div class="font-medium">
                        {{ check.name }}
                        <span
                          :class="['text-xs px-1.5 py-0.5 rounded font-bold ml-1', check.status === 'OK' ? 'bg-green-600 text-white' : 'bg-red-600 text-white']"
                        >
                          {{ check.status }}
                        </span>
                      </div>
                      <div class="text-sm text-gray-600 mt-1">{{ check.message }}</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <!-- Part Checks -->
            <div
              v-for="(part, partIdx) in quality.partChecks"
              :key="partIdx"
              :class="['border rounded-md overflow-hidden mb-4', part.overallStatus === 'OK' ? 'border-green-500 bg-green-50' : 'border-red-500 bg-red-50']"
            >
              <div
                :class="['p-3 font-bold flex items-center justify-between', part.overallStatus === 'OK' ? 'bg-green-100 text-green-900' : 'bg-red-100 text-red-900']"
              >
                <span>{{ part.title }}</span>
                <span
                  :class="['text-xs px-2 py-0.5 rounded font-bold', part.overallStatus === 'OK' ? 'bg-green-600 text-white' : 'bg-red-600 text-white']"
                >
                  {{ part.overallStatus === 'OK' ? '✅ OK' : '❌ NG' }}
                </span>
              </div>
              <div class="p-4">
                <div class="grid gap-2.5">
                  <div
                    v-for="(check, checkIdx) in part.checks"
                    :key="checkIdx"
                    :class="['flex items-center justify-between p-2 rounded bg-gray-100 border-l-4', check.status === 'OK' ? 'bg-green-50 border-l-green-600' : 'bg-red-50 border-l-red-600']"
                  >
                    <div>
                      <div class="font-medium">
                        {{ check.name }}
                        <span
                          :class="['text-xs px-1.5 py-0.5 rounded font-bold ml-1', check.status === 'OK' ? 'bg-green-600 text-white' : 'bg-red-600 text-white']"
                        >
                          {{ check.status }}
                        </span>
                      </div>
                      <div class="text-sm text-gray-600 mt-1">{{ check.message }}</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div v-else class="text-center py-8 text-gray-600 bg-gray-100 rounded-lg border-2 border-dashed border-gray-300">
        📊 暂无详细质量检查数据
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'QualitySection',
  props: {
    quality: {
      type: Object,
      required: true
    }
  },
  methods: {
    toggleDetails() {
      this.quality.isExpanded = !this.quality.isExpanded
    }
  }
}
</script>

